<template>
  <page-header-wrapper>
    <page-tab-list>
      <div class="table-page-search-box">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="8" :sm="24">
              <a-form-item label="商品名称">
                <a-input allow-clear placeholder="请输入商品名称" v-model="queryParam.goods_name"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="清单编号">
                <a-input allow-clear placeholder="请输入清单编号" v-model="queryParam.order_no"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="生成时间">
                <a-range-picker
                  allowClear
                  format="YYYY-MM-DD HH:mm"
                  valueFormat="YYYY-MM-DD HH:mm"
                  :placeholder="['开始时间', '结束时间']"
                  v-model="queryTime1"
                />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="">
                <a-button type="primary" @click="getList">查询</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </page-tab-list>
    <a-card :bordered="false">
      <div class="table-operator" style="display: flex; justify-content: space-between">
        <a-radio-group v-model="queryParam.status" @change="getList">
          <a-radio-button value="-1"> 全部 </a-radio-button>
          <a-radio-button value="0"> 待发货 </a-radio-button>
          <a-radio-button value="1"> 待收货 </a-radio-button>
          <a-radio-button value="2"> 待投篮 </a-radio-button>
          <!-- <a-radio-button value="4"> 待分拣 </a-radio-button>
          <a-radio-button value="3"> 已分拣 </a-radio-button> -->
        </a-radio-group>

        <div>
          <a-dropdown>
            <a-menu slot="overlay">
              <a-menu-item @click="batch('2')">批量收货</a-menu-item>
              <a-menu-item @click="batch('4')">批量投篮</a-menu-item>
            </a-menu>
            <a-button> 批量操作 </a-button>
          </a-dropdown>
        </div>
      </div>

      <a-table
        style="width: 100%; overflow-x: auto"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        size="default"
        :columns="columns0"
        :data-source="list"
        :row-key="(record) => record.id"
        :pagination="{
          current: queryParam.page,
          total: totalCount,
          pageSize,
          showSizeChanger: false,
          onChange: tablePageChange,
        }"
      >
        <span slot="order_no" slot-scope="text">
          <a-tooltip placement="topLeft">
            <template slot="title">
              <span>{{ text }}</span>
            </template>
            {{ text }}
          </a-tooltip>
        </span>

        <span slot="admin_name" slot-scope="text">
          <a-tooltip placement="topLeft">
            <template slot="title">
              <span>{{ text }}</span>
            </template>
            {{ text }}
          </a-tooltip>
        </span>

        <span slot="admin_tel" slot-scope="text">
          <a-tooltip placement="topLeft">
            <template slot="title">
              <span>{{ text }}</span>
            </template>
            {{ text }}
          </a-tooltip>
        </span>

        <span slot="goods_num" slot-scope="text">
          {{ text }}
        </span>

        <span slot="action" slot-scope="text, record">
          <a-button type="link" size="small" @click="handle('open', record, 1)">打印投篮单</a-button>
          <!-- <a-divider type="vertical" />
          <a-button type="link" size="small" @click="handle('open', record, 2)">打印投篮单</a-button> -->

          <template v-if="parseInt(record.status) === 1">
            <a-divider type="vertical" />
            <a-button type="link" size="small" @click="handle('change', record, '2')">收货</a-button>
          </template>
          <template v-if="parseInt(record.status) === 2">
            <a-divider type="vertical" />
            <a-button type="link" size="small" @click="handle('change', record, '4')">投篮</a-button>
          </template>
        </span>
      </a-table>

      <!-- @ok="exportExcel" -->
      <!-- okText="导出" -->

      <a-modal
        @ok="order_export = false"
        title="打印投篮单"
        :mask-closable="false"
        :destroy-on-close="true"
        :width="1200"
        v-model="order_export"
      >
        <div style="float: right">
          <a-button v-print="'#print'" type="primary">打印</a-button>
        </div>

        <div id="print">
          <a-descriptions v-if="print_order">
            <a-descriptions-item label="配送单号"> {{ print_order.order_no }} </a-descriptions-item>
            <a-descriptions-item label="生成时间"> {{ print_order.created_at }} </a-descriptions-item>
            <a-descriptions-item label="分拣人员"> {{ print_order.admin_name }} </a-descriptions-item>
            <a-descriptions-item label="联系方式"> {{ print_order.admin_tel }} </a-descriptions-item>
            <a-descriptions-item label="分拣时间"> {{ print_order.sorting_time }} </a-descriptions-item>
          </a-descriptions>
          <!-- print_order.goods -->

          <table class="table" v-if="print_order && print_order.mch_goods">
            <tr>
              <th width="50">
                <div class="tc">序号</div>
              </th>

              <th>
                <div class="goods">商品信息</div>
              </th>

              <th width="175">
                <div class="address">商城名称</div>
              </th>
            </tr>
            <tr v-for="(item, index) of print_order.mch_goods" :key="index">
              <td>
                <div class="tc">{{ index + 1 }}</div>
              </td>

              <td>
                <div class="por">
                  <span class="s1"></span>
                  <span class="s2"></span>
                  <div class="table_list">
                    <div class="item">
                      <div class="box box1"><div class="title">商品名称</div></div>
                      <div class="box box2"><div class="title">商品规格</div></div>
                      <div class="box box3"><div class="title">数量</div></div>
                    </div>
                  </div>
                  <div class="table_list">
                    <div class="item item2" v-for="(el, i) of item.mch_order" :key="i">
                      <div class="box box1">
                        <div class="goods">{{ el.goods_name }}</div>
                      </div>
                      <div class="box box2">
                        <div class="attr">{{ getAttr(el.goods_attr) }}</div>
                      </div>
                      <div class="box box3">{{ el.goods_num }}</div>
                    </div>
                  </div>
                </div>
              </td>

              <td>
                <div style="padding: 0 5px">{{ item.store_name }}</div>
              </td>
            </tr>
          </table>

          <div class="fd_create_t">打印时间：{{ time }}</div>
        </div>
      </a-modal>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { agentOrderDistributionList, setDistributionStatus } from '@/api/purchase/supplier'
import { exportDistributionInfo, getExportDistributionInfo } from '@/api/purchase/purchase'
import { formatDate } from '@/utils/utils'

const columns0 = [
  {
    title: 'ID',
    dataIndex: 'id',
    width: 80,
  },
  {
    title: '清单编号',
    dataIndex: 'order_no',
    scopedSlots: {
      customRender: 'order_no',
    },
    ellipsis: true,
  },
  {
    title: '收货人',
    dataIndex: 'admin_name',
    scopedSlots: {
      customRender: 'admin_name',
    },
    ellipsis: true,
    // width: 100,
  },
  {
    title: '收货人电话',
    dataIndex: 'admin_tel',
    scopedSlots: {
      customRender: 'admin_tel',
    },
    ellipsis: true,
    // width: 140,
  },
  {
    title: '商品数量',
    dataIndex: 'goods_num',
    scopedSlots: {
      customRender: 'goods_num',
    },
    width: 120,
    sorter: (a, b) => a.goods_num - b.goods_num,
  },
  {
    title: '生成时间',
    dataIndex: 'created_at',
    sorter: (a, b) => a.created_at - b.created_at,
    // width: 140,
  },
  {
    title: '分拣时间',
    dataIndex: 'sorting_time',
    sorter: (a, b) => a.sorting_time - b.sorting_time,
    // width: 140,
  },
  {
    title: '操作',
    scopedSlots: {
      customRender: 'action',
    },
  },
]

const columns = [
  {
    title: '名称',
    dataIndex: 'goods_name',
    key: 'goods_name',
    width: 100,
  },
  {
    title: '规格',
    dataIndex: 'goods_attr',
    key: 'goods_attr',
    width: 80,
    customRender: (text) => {
      let str = ''
      for (let i in text) {
        str += text[i].attr_name + ' '
      }
      return str
    },
  },
  {
    title: '数量',
    dataIndex: 'goods_num',
    key: 'goods_num',
    width: 60,
  },
]
const columns1 = [
  {
    title: '商户名称',
    dataIndex: 'mch_name',
    key: 'mch_name',
    width: 100,
  },
  {
    title: '名称',
    dataIndex: 'goods_name',
    key: 'goods_name',
    width: 100,
  },
  {
    title: '规格',
    dataIndex: 'goods_attr',
    key: 'goods_attr',
    width: 80,
  },
  {
    title: '数量',
    dataIndex: 'goods_num',
    key: 'goods_num',
    width: 60,
  },
]
export default {
  computed: {
    getAttr() {
      return (attr) => {
        if (!attr) return '-'

        return JSON.parse(attr)
          .attr_list.map((el) => el.attr_name)
          .join('/')
      }
    },
  },

  data() {
    return {
      queryParam: {
        order_no: '',
        goods_name: '',
        page: 1,
        limit: 10,
        status: '-1',
      },
      queryTime1: [],
      queryTime2: [],
      pageSize: 10,
      list: [],
      orderInfo: null,
      isShowPrintModal: false,
      exportUrl: '',
      type: 0,
      print_order: null,
      order_export: false,
      columns,
      columns1,
      columns0,
      selectedRowKeys: [],

      time: '',

      print_order2: null,
      order_export2: false,
    }
  },

  created() {
    this.getList()

    this.exportUrl = exportDistributionInfo()
  },

  methods: {
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },

    exportExcel() {
      let url = `${this.exportUrl}&`
      url += `export=${this.type}&id=${this.print_order.id}`
      window.open(url, '_blank')
    },

    // async print(row, type) {
    //   console.log(row.id, type)
    //   if (type === 1) {
    //     this.order_export = true
    //     this.print_order = row
    //     this.type = type
    //   } else {
    //     console.log(123123)
    //     const res = await getExportDistributionInfo({ id: row.id })
    //     if (!res.code) {
    //       this.order_export = true
    //       this.print_order = res.data
    //       this.print_order.id = row.id
    //       this.type = type
    //     } else {
    //       console.log(res)
    //     }
    //   }
    // },

    setDistributionStatus(ids, status) {
      this.$confirm({
        title: '提示',
        content: '是否执行此次操作？',
        onOk: () => {
          setDistributionStatus({
            ids,
            status,
          }).then((res) => {
            if (!res.code) {
              this.tablePageChange(1)
              this.$message.success(res.msg)
              this.selectedRowKeys = []

              return
            }

            this.$message.error(res.msg)
          })
        },
        onCancel() {},
      })
    },

    batch(type) {
      let { selectedRowKeys } = this.$refs.table
      if (!selectedRowKeys.length) {
        this.$message.error('至少选择一条数据！')
        return
      }

      this.setDistributionStatus(selectedRowKeys.map((el) => el.id).join(','), type)
    },

    // 分页请求
    tablePageChange(e) {
      this.queryParam.page = e
      this.getList()
    },

    // 获取数据
    async getList() {
      const hide = this.$message.loading('加载中...', 1000)
      let { queryParam, queryTime1, queryTime2 } = this,
        start_time = '',
        end_time = '',
        sorting_start_time = '',
        sorting_end_time = ''

      if (queryTime1.length) {
        start_time = queryTime1[0]
        end_time = queryTime1[1]
      }

      if (queryTime2.length) {
        sorting_start_time = queryTime2[0]
        sorting_end_time = queryTime2[1]
      }

      const res = await agentOrderDistributionList({
        ...queryParam,
        start_time,
        end_time,
        sorting_start_time,
        sorting_end_time,
      })
      hide()

      if (res.code == 0) {
        let list = res.data.data || []

        list = list.map((el) => {
          let goods = el.mch_goods

          goods.forEach((cel) => {
            if (cel.goods_attr) {
              cel.goods_attr = JSON.parse(cel.goods_attr)
            } else {
              cel.goods_attr = []
            }
          })

          return el
        })

        this.list = list
        this.totalCount = res.data.count

        this.selectedRowKeys = []
      }
    },

    async handle(type, item, params) {
      switch (type) {
        case 'edit':
          break

        case 'open':
          this.type = params

          // if (params === 1) {
          this.print_order = item
          this.order_export = true
          this.time = formatDate(new Date())

          console.log('this.order_export,', item)

          // } else {
          //   const res = await getExportDistributionInfo({ id: item.id })
          //   if (!res.code) {
          //     this.order_export2 = true

          //     this.print_order2 = res.data
          //     return
          //   }
          //   this.$message.error(res.msg)
          // }

          break

        case 'change':
          this.setDistributionStatus(item.id, params)
          break
        default:
          break
      }
    },
  },
}
</script>
<style lang="less" scoped>
.table {
  width: 100%;

  th,
  td {
    height: 44px;
    border: 1px solid #000000;
    color: #000;
    padding: 0;
  }

  td {
    color: rgba(0, 0, 0, 0.6);
  }

  .tc {
    text-align: center;
  }

  .attr {
    margin: 0 auto;
    padding: 0 5px;
    max-width: 200px;
  }

  .goods {
    padding: 0 50px;
    max-width: 500px;
    margin: 0 auto;
  }

  div {
    // padding: 0 5px;
    text-align: center;
  }

  .por {
    position: relative;
    padding: 0;

    span {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 1px;
      background: #000;
      z-index: 2;
    }

    .s1 {
      left: 50%;
    }

    .s2 {
      left: 80%;
    }
  }

  .table_list {
    position: relative;
    padding: 0;

    .address {
      padding: 0 16px;
      max-width: 143px;
    }

    .goods {
      padding: 0 10px;
    }

    .title {
      font-size: 14px;
      font-weight: bold;
      color: #333;
      height: 40px;
      line-height: 40px;
    }

    .item2 {
      border-top: 1px solid #000000;
    }

    .item {
      display: flex;
      align-items: center;

      .box1 {
        width: 50%;
      }
      .box2 {
        width: 30%;
      }

      .box3 {
        width: 20%;
      }

      .box {
        overflow: hidden;
      }
    }
  }
}

.fd_create_t {
  padding-top: 20px;
  text-align: right;
}
</style>
